<template>
  <div style="height:100%">
	  <el-row style="height: 100%;">
		  <el-col :span="4" style="height: 100%;border: 1px solid gray;padding: 10px 2px;">
				<el-menu default-active="2" unique-opened class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#ffffff"
				  text-color="#000000" active-text-color="#ffd04b" router>
				  <template v-for="(item,index) in arr">
				    <el-menu-item :index="item.index" :key='index' v-if="!item.arr2">
				      <span slot="title">{{item.title}}</span>
				    </el-menu-item>
				    <el-submenu :index="item.index" :key='index' v-else>
				      <template slot="title">
				        <span>{{item.title}}</span>
				      </template>
				      <el-menu-item v-for='(item,index) in item.arr2' :index="item.index" :key='index'>{{item.title}}</el-menu-item>
				    </el-submenu>
				  </template>
				</el-menu>  
		  </el-col>
		  <el-col :span="20">
			  <router-view></router-view>
		  </el-col>
	  </el-row>
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{
            title: '系统管理',
            index: 'a',
			arr2: [{
			    title: '用户管理',
			    // index: 'systemStatement'
			  },{
			    title: '角色管理',
			    // index: 'transactionflow'
			  },{
			    title: '菜单管理',
			    // index: 'systemStatement'
			  },{
			    title: '部门管理',
			    // index: 'transactionflow'
			  },{
			    title: '岗位管理',
			    // index: 'systemStatement'
			  },{
			    title: '字典管理',
			    // index: 'transactionflow'
			  },{
			    title: '参数设置',
			    // index: 'systemStatement'
			  },{
			    title: '通知公告',
			    // index: 'transactionflow'
			  },{
			    title: '日志管理',
			    // index: 'transactionflow'
			  },
			]
          },
          {
            title: '系统监控',
            index: 'b',
            arr2: [{
                title: '在线用户',
                // index: 'systemStatement'
              },{
                title: '定时任务',
                // index: 'transactionflow'
              },{
                title: '数据监控',
                // index: 'systemStatement'
              },{
                title: '服务监控',
                // index: 'transactionflow'
              },{
                title: '缓存监控',
                // index: 'transactionflow'
              },
            ]
          },
          {
            title: '设备管理',
            index: "c",
            arr2: [{
                title: '设备列表',
                // index: 'sysmangement'
              },{
                title: '设备分布',
                // index: 'changepwd'
              },{
                title: '路线轨迹',
                // index: 'sysmangement'
              },{
                title: '卡组配置',
                // index: 'changepwd'
              },{
                title: '设备上下线记录',
                // index: 'sysmangement'
              },{
                title: '设备参数配置',
                // index: 'changepwd'
              },
            ]
          },
		  {
		    title: '节目管理',
		    index: "d",
		    arr2: [{
		        title: '节目列表',
		        // index: 'sysmangement'
		      },{
		        title: '发送记录',
		        // index: 'changepwd'
		      },{
		        title: '素材管理',
		        // index: 'sysmangement'
		      },{
		        title: '设备广告列表',
		        // index: 'changepwd'
		      }
		    ]
		  },
		  {
		    title: '统计报表',
		    index: "e",
		    arr2: [{
		        title: '数据统计',
		        // index: 'sysmangement'
		      },{
		        title: '步数统计',
		        // index: 'changepwd'
		      }
		    ]
		  }
        ]
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
</style>
